<template>
  <div class="renyuansetting">
    <el-row :gutter="10">
      <el-col :span="10">
        <el-card style="min-height: 400px">
          <p>库管员设置</p>
          <el-form ref="stuForm" :model="cangKuEntity" label-width="100px">
            <el-form-item label="选择人员">
              <el-select filterable v-model="cangKuEntity.userid" placeholder="选择人员">
                <el-option  v-for="item in state.allRenYuanList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="btnSaveEntity" size="default">保存</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="14" style="min-height: 400px">
        <el-card style="min-height: 400px">
          <p>仓库可见范围</p>
          <el-checkbox-group v-model="state.selectedTbRenYuanList" @change="selectedChange">
            <el-checkbox :label="item.name" v-for="(item,index) in state.tbRenYuanList"  :key="item.id" />
          </el-checkbox-group>
          <p>
            <el-button type="primary" @click="btnSaveUser" size="default">保存</el-button>
          </p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="renyuangsetting">
import request from '/@/utils/request';
import { ElMessage } from 'element-plus';
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent, defineProps} from "vue";
import PermissionType from "/@/utils/PermissionType";

let props = defineProps({
  cangkuid : {type : Number, default: 0}
})

let cangKuEntity = ref({
  id : props.cangkuid,
  userid : undefined
})
const state = reactive({
  allRenYuanList:[],
  tbRenYuanList : [],
  selectedTbRenYuanList : [],
})
const checkList = ref([])
const getCangKuEntity = () =>{
  return request({
    url: '/cangku/getcangku',
    data: {id : cangKuEntity.value.id},
  });
}
const getAllRenYuan = ()=>{
  return request({
    url: '/sys/useradmin/alluser',
    data: {},
  });
}
const getTbRenYuan = ()=>{
  return request({
    url: '/sys/useradmin/permissionuser',
    data: {pid : PermissionType.pddata_pandian},
  });
}
const getSelectedTbRenYuan = ()=>{
  return request({
    url: '/cangku/listcangkuuser',
    data: {id : props.cangkuid},
  });
}
const loadData = async()=>{
  //获取仓库实体数据
  const entity = await getCangKuEntity();
  cangKuEntity.value.userid = entity.data.userid || undefined
  //获取所有人员数据
  const allRenYuanObj = await getAllRenYuan();
  state.allRenYuanList = allRenYuanObj.data
  //获取有填报权限的人
  const tbRenYuanObj = await getTbRenYuan();
  state.tbRenYuanList = tbRenYuanObj.data
  //获取所有仓库已选择的人员
  const selectedTbRenYuanObj = await getSelectedTbRenYuan();
  state.selectedTbRenYuanList = selectedTbRenYuanObj.data.map(function (value,index,array){
    return value.name
  })
}
const btnSaveEntity = ()=>{
  if(!cangKuEntity.value.userid){
    ElMessage.error("请选择库管员")
    return
  }
  request({
    url: '/cangku/savecangku',
    data: cangKuEntity.value,
  }).then((res)=>{
    if(res.code === '200'){
      ElMessage.success("库管员设置成功")
    }else{
      ElMessage.error(res.msg)
    }
  })
}
const selectedChange = (selected)=>{
  //console.log(selected)
}
const btnSaveUser = () =>{
  let selectedTbRenYuanIds = []
  state.selectedTbRenYuanList.forEach(tbName => {
    let fArray = state.tbRenYuanList.filter(ry => ry.name === tbName)
    fArray.forEach(fry =>{
      selectedTbRenYuanIds.push(fry.id)
    })
  })
  request({
    url: '/cangku/savecangkuuser',
    data: {id : props.cangkuid, users : selectedTbRenYuanIds}
  }).then((res)=>{
    if(res.code === '200'){
      ElMessage.success("仓库可见范围设置成功")
    }else{
      ElMessage.error(res.msg)
    }
  })
}
onMounted(()=>{
  cangKuEntity.value.id = props.cangkuid
  loadData();
})
</script>

<style scoped lang="scss">
.renyuansetting{
  p{
    padding: 6px 0;
  }
}
</style>
